<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>应收账单</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-spin :spinning="spinning">
      <div class="pageTabsWhole" style="margin-top:24px;">
        <a-tabs
          class="table_tab"
          :activeKey="activeKey"
          :animated="false"
          :tabBarStyle="{margin:0}"
          :tabBarGutter="16"
          @change="onChangeStatus"
        >
          <a-tab-pane v-for="v in tabs" :key="v.key" :tab="v.title"></a-tab-pane>
        </a-tabs>
      </div>
      <div class="pageContentWhole">
        <a-row>
          <a-col :span="24">
            <a-form layout="inline">
              <a-form-item label="付款单位">
                <a-input v-model="searchForm.custName" />
              </a-form-item>
              <a-form-item label="对账单编号">
                <a-input v-model="searchForm.billCode" />
              </a-form-item>
              <a-form-item label="是否超期">
                <a-select v-model="searchForm.isOverTime" class="selectWidth">
                  <a-select-option key>全部</a-select-option>
                  <a-select-option :key="1">是</a-select-option>
                  <a-select-option :key="0">否</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="对账日期">
                <a-range-picker :value="searchForm.dateRange" @change="onDateChange">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>

              <a-form-item>
                <a-button type="primary" @click="handleSubmit1">查询</a-button>
              </a-form-item>
              <!-- <a-form-item>
              <a-button type="primary" @click="exportExcel">导出Excel</a-button>
              </a-form-item>-->
            </a-form>
          </a-col>
        </a-row>
      </div>

      <!-- 数据 -->
      <a-row class="orderItem ordertem_de">
        <a-col :span="24">
          <!-- <a-spin :spinning="spinning"> -->
          <template v-if="tableData.length > 0">
            <div v-for="(item, index) in tableData" :key="index" class="orderList">
              <a-card size="small">
                <template slot="title">
                  <a-descriptions :column="4" class="titleCard" style="padding-left:24px;">
                    <a-descriptions-item label="对账单编号">{{item.billCode}}</a-descriptions-item>
                    <a-descriptions-item label="付款单位">
                      <span :title="item.payableCustName">{{item.payableCustName}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="收款单位">{{item.receivableCustName||'江苏佳特物流发展有限公司'}}</a-descriptions-item>
                  </a-descriptions>
                </template>
                <!-- <template slot="extra">付款单位：</template> -->
                <div class="order_detail order_detail_cd">
                  <a-descriptions :column="4" size="small">
                    <a-descriptions-item label="应收总金额">
                      <span class="t_money_fh">{{amountType(item.currencyType)}}</span>
                      <span class="t_money">{{item.totalAmount}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="已收总金额">
                      <span class="t_money_fh">{{amountType(item.currencyType)}}</span>
                      <span class="t_money">{{item.alreadyAmount}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="对账日期">{{item.createTime}}</a-descriptions-item>
                    <a-descriptions-item label="截止日期">{{item.endDate}}</a-descriptions-item>

                    <a-descriptions-item label="开票总金额">
                      <span class="t_money_fh">{{amountType(item.currencyType)}}</span>
                      <span class="t_money">{{item.invoiceAmount}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="未收总金额">
                      <span class="t_money_fh">{{amountType(item.currencyType)}}</span>
                      <span class="t_money">{{item.remainingAmount}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="开票日期">{{item.lastInvoiceDate||'--'}}</a-descriptions-item>
                    <a-descriptions-item label="结束日期">{{item.completeTime||'--'}}</a-descriptions-item>
                  </a-descriptions>
                </div>
              </a-card>
              <a-card size="small" style="border-top:none" class="order_czuo">
                <template slot="title">
                  <a-descriptions :column="12" class="titleCard">
                    <a-descriptions-item :span="2">
                      <span v-if="item.status===1" style="color: red">未结清</span>
                      <span v-if="item.status===2" style="color: green">已结清</span>
                    </a-descriptions-item>
                  </a-descriptions>
                </template>
                <a-button
                  v-if="item.status===1"
                  slot="extra"
                  type="primary"
                  ghost
                  @click="withdrawIt(item.id)"
                  style="margin-left: 12px"
                >撤回</a-button>
                <a-button
                  slot="extra"
                  type="primary"
                  ghost
                  @click="operateIt(item.id, 'JIA_TE')"
                  style="margin-left: 12px"
                >操作</a-button>
                <a-button
                  slot="extra"
                  type="primary"
                  ghost
                  @click="exportExcel(item.id)"
                  style="margin-left: 12px"
                >导出账单</a-button>
                <a-button
                  slot="extra"
                  type="primary"
                  ghost
                  @click="billDetail(item.id, item.status)"
                  style="margin-left: 12px"
                >账单详情</a-button>
              </a-card>
            </div>
          </template>
          <div
            v-if="tableData.length === 0"
            style="margin: 0 24px 24px; padding: 20px 0; background: white;"
          >
            <a-empty />
          </div>
          <!-- </a-spin> -->
          <p class="orderPagination">
            <a-pagination
              show-size-changer
              show-quick-jumper
              :current="pagination.current"
              :total="pagination.total"
              :showTotal="pagination.showTotal"
              :pageSize="pagination.pageSize"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </p>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import { queryBillList, cancelBill } from '@/api/financialCenter'
import { commonExport } from '@/api/request'

const tabs = [
  { key: '', title: '所有应收账单' },
  { key: 1, title: '未结清' },
  { key: 2, title: '已结清' }
]
const defaultSearchForm = (status) => {
  return {
    businessType: 'JIA_TE',
    feeType: 1, // 应收应付：1应收、2应付
    currencyType: '', // 币种：CNY、USD
    billCode: '', // 对账编号
    custName: '',
    searchStartTime: null, // 对账日期查询，开始时间
    searchEndTime: null, // 对账日期查询，结束时间
    isOverTime: '', // 是否超期：1是，0否
    status, // 1未结清，2已结清，不传为全部
    dateRange: [null, null]
  }
}

export default {
  data () {
    return {
      tabs,
      searchForm: defaultSearchForm(''),
      spinning: false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pagination: {},
      activeKey: ''
    }
  },
  methods: {
    amountType (currencyType) {
      return currencyType === 'CNY' ? '¥' : (currencyType === 'USD' ? '$' : '?')
    },
    onChangeStatus (key) {
      this.activeKey = key
      this.searchForm = defaultSearchForm(key)
      this.handleSubmit1()
    },
    onDateChange (date, dataStr) {
      this.searchForm.searchStartTime = dataStr[0]
      this.searchForm.searchEndTime = dataStr[1]
      this.searchForm.dateRange = [date[0], date[1]]
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit (t0) {
      this.spinning = true

      // 缓存还原搜索
      this.listAssign(this.searchForm, t0)
      if (t0) {
        this.pageSize = t0.pageSize
        this.pageNum = t0.pageNum
        this.activeKey = t0.status
        this.searchForm.dateRange = [t0.searchStartTime, t0.searchEndTime]
      }
      const t = {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      queryBillList(t).then(rsp => {
        this.spinning = false
        this.tableData = rsp.data.list
        this.pagination = this.getPagination(rsp.data)
        this.$route.meta.s = t
      })
    },
    exportExcel (billId) {
      commonExport('/bill/exportJTbillList', {
        billId,
        feeType: 1
      })
    },
    withdrawIt (id) {
      if (!this.$root._bc.withdrawBill) {
        this.$message.error('您无此权限！')
        return
      }
      const _t = this
      this.$confirm({
        title: '确定撤回账单？',
        onOk () {
          cancelBill({ id }).then(rsp => {
            _t.$message.success('成功撤回账单')
            _t.handleSubmit()
          })
        }
      })
    },
    operateIt (id, t) {
      this.$router.push('receivableBillOfTe/' + id + '/opt?t=' + t)
    },
    billDetail (id, status) {
      this.$router.push('receivableBillOfTe/' + id + '?status=' + status)
    }
  },
  created () {
    this.pagination = this.getPagination()
  },
  mounted () {
    this.handleSubmit(this.$route.meta.s)
  },
  beforeRouteEnter (to, from, next) {
    if ((from.name !== 'financialCenter/receivableBillOfTe/billDetailList' && from.name !== 'financialCenter/receivableBillOfTe/billOperate') || to.query.f !== '1') {
      to.meta.s = null
    }
    next()
  }
}
</script>

<style lang="less" scoped>
</style>
